<template>
  <highcharts :options="chartOptions"></highcharts>
</template>

<script>
import { requestGetExpAndTimeGraph } from "@/api/index.js";

export default {
  name: "ExpAndTime",
  props: ["search_data"],
  watch: {
    search_data: function() {
      // console.log("search_data", this.search_data);
      this.getExpAndTimeGraph();
      this.chartOptions.subtitle.text =
        this.search_data.city + "/" + this.search_data.experience;
      this.chartOptions.series[0].name = this.search_data.position;
    }
  },
  methods: {
    getExpAndTimeGraph: function() {
      requestGetExpAndTimeGraph({
        exp: this.search_data.experience,
        city: this.search_data.city,
        position: this.search_data.position,
        headDate: this.search_data.startDate,
        endDate: this.search_data.endDate,
      }).then(data => {
        this.chartOptions.series[0].data = data.result;
      });
    }
  },
  data() {
    let data = [];
    this.getExpAndTimeGraph();
    return {
      chartOptions: {
        chart: {
          type: "column"
        },
        title: {
          text: "职位数量分布图(经验)"
        },
        subtitle: {
          text: this.search_data.city
        },
        series: [
          {
            type: 'pie',
            name: this.search_data.position,
            data: []
          }
        ],
        // 版权水印
        credits: {
          // enabled: false,
          text: "redas",
          href: "#"
        },
        // 显示数据点的数据
        plotOptions: {
          line: {
            dataLabels: {
              enabled: true
            }
          },
          column: {
            pointPadding: 0,
            borderWidth: 0,
            groupPadding: 0,
            shadow: false
          }
        }
      }
    };
  }
};
</script>>